<script setup lang="ts">
import PictureConter from './components/PictureConter/index.vue'
import Price from './components/Price/index.vue'
import keywordTitle from '~/components/KeywordTitle/index.vue'
import ChangeButton from '~/components/ChangeButton/index.vue'
import APIDetails from '~/api/details'
import { useAuth } from '~/stores/auth/index'
import type { GoodsInfoData, GoodsInfoResult, SimilarResult, SetGoodsLikesResult, SetGoodsCollectionResult, SetGoodsSharesResult } from '@/api/details/types'
import PurchasePicture from './components/PurchasePicture/index.vue'
import Give from '~/components/Give/index.vue'
import Advertising from '~/components/Advertising/index.vue'

definePageMeta({
    showSmallSearchBox: true,
})

defineOptions({
    name: 'PictureDetails'
})

const $router = useRouter()
const $route = useRoute()
const { token } = storeToRefs(useAuth())
const { isNextOperation } = useAuth()
const goodsInfo = ref<GoodsInfoResult>({})
const consumeLogList = ref<any[]>([])
provide('goodsInfo', goodsInfo)
provide('consumeLogList', consumeLogList)

const loading = shallowRef<boolean>(false)
const shopOtherloading = shallowRef<boolean>(false)

const similarList = ref<SimilarResult[]>([])
function getSimilar() {
    const goodsInfoData: GoodsInfoData = {
        category_type: ($route.query.categoryType as string),
        id: ($route.params.id as string)
    }

    loading.value = true
    APIDetails.getSimilar(goodsInfoData).then(({ data }) => {
        similarList.value = data
    }).finally(() => {
        loading.value = false
    })
}

function handleJumpPictureDetails(id: number) {
    window.open($router.resolve(`/picture-details/${id}?categoryType=Picture`).href, '_blank')
}

const shopOtherList = ref<SimilarResult[]>([])

function getShopOther() {
    shopOtherloading.value = true
    const goodsInfoData: GoodsInfoData = {
        category_type: ($route.query.categoryType as string),
        id: ($route.params.id as string)
    }
    APIDetails.getShopOther(goodsInfoData).then(({ data }) => {
        shopOtherList.value = data
    }).finally(() => [
        shopOtherloading.value = false
    ])
}

function setLink(data: SetGoodsLikesResult) {
    goodsInfo.value.is_likes = data.is_likes
    goodsInfo.value.likes = data.likes
}

function setCollections(data: SetGoodsCollectionResult) {
    goodsInfo.value.is_collection = data.is_collection
    goodsInfo.value.collections = data.collections
}

function setShares(data: SetGoodsSharesResult) {
    goodsInfo.value.shares = data.shares
}

const dialogVisible = shallowRef<boolean>(false)

const dialogGiveVisible = shallowRef<boolean>(false)
function handleGiveReward() {
    if (isNextOperation()) {
        dialogGiveVisible.value = true
    }
}

function handleClickPurchase() {
    if (isNextOperation()) {
        dialogVisible.value = true
    }
}

onMounted(() => {
    watch(token, async (newValue) => {
        const goodsInfoData: GoodsInfoData = {
            category_type: ($route.query.categoryType as string),
            id: ($route.params.id as string)
        }

        if (newValue) {
            const { data } = await APIDetails.getLoginNewGoodsInfo(goodsInfoData)
            goodsInfo.value = data.getGoodsInfo
            similarList.value = data.getSimilar
            shopOtherList.value = data.getShopOther
            consumeLogList.value = data.getConsumeLog
        } else {
            const { data } = await APIDetails.getNewGoodsInfo(goodsInfoData)
            goodsInfo.value = data.getGoodsInfo
            similarList.value = data.getSimilar
            shopOtherList.value = data.getShopOther
            consumeLogList.value = data.getConsumeLog
        }
    }, { immediate: true })
})

</script>

<template>
    <div class="picture-details">
        <div class="picture-container">
            <div class="left">
                <PictureConter @set-link="setLink" @set-collections="setCollections" @set-shares="setShares"
                    @give-reward="handleGiveReward" />
            </div>
            <div class="right">
                <Price @on-click-purchase="handleClickPurchase" />
            </div>
        </div>
        <div class="picture-content">
            <div class="title">
                <keywordTitle title="相似推荐" />
                <ChangeButton @click="getSimilar" />
            </div>
            <div class="content" v-loading="loading">
                <div class="content-item" v-for="item in similarList" :key="item.id"
                    @click="handleJumpPictureDetails(item.id)">
                    <img :src="item.image" alt="image">
                </div>
            </div>
        </div>
        <div class="picture-content">
            <div class="title">
                <keywordTitle title="店主其他产品" />
                <ChangeButton @click="getShopOther" />
            </div>
            <div class="content" v-loading="shopOtherloading">
                <div class="content-item" v-for="item in shopOtherList" :key="item.id"
                    @click="handleJumpPictureDetails(item.id)">
                    <img :src="item.image" alt="image">
                </div>
            </div>
        </div>
        <div class="picture-content">
            <Advertising />
        </div>
        <PurchasePicture v-model="dialogVisible" />
        <Give v-model="dialogGiveVisible" />
    </div>
</template>

<style lang="less" scoped>
.picture-details {
    padding-top: 35px;

    .picture-content {
        box-sizing: border-box;
        width: 1340px;
        padding: 0 20px;
        margin: 0 auto;

        .content {
            display: flex;
            flex-wrap: wrap;
            gap: 15px;
            margin-bottom: 50px;

            &:after {
                content: '';
                display: block;
                flex-grow: 99999;
            }

            .content-item {
                flex-grow: 1;
                border-radius: 5px;
                overflow: hidden;
                cursor: pointer;

                img {
                    display: block;
                    min-width: 100%;
                    height: 200px;
                    object-fit: cover;
                }
            }
        }

        .title {
            margin: 20px 0;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
    }

    .picture-container {
        box-sizing: border-box;
        width: 1340px;
        padding: 0 20px;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        gap: 0 36px;

        .right {
            width: 380px;
        }

        .left {
            width: 880px;

        }

    }
}
</style>
